<template>
  <div class="accident-vaccines">
    <header>
      <div class="insurance-name" v-if="type == 1">个人预防接种医疗意外保险(A2) -方案一</div>
      <div class="insurance-name" v-if="type == 2">个人预防接种医疗意外保险(A2) -方案二</div>
      <div class="insurance-name" v-if="type == 3">个人预防接种医疗意外保险(A2) -方案三</div>
      <div class="insurance-name" v-if="type == 4">个人预防接种医疗意外保险(A2) -方案四</div>
      <div class="insurance-price" v-if="type == 1">¥65</div>
      <div class="insurance-price" v-if="type == 2">¥98</div>
      <div class="insurance-price" v-if="type == 3">¥145</div>
      <div class="insurance-price" v-if="type == 4">¥160</div>
    </header>
    <div class="column-title">
      <strong>投保人信息</strong>
    </div>
    <van-form>
      <van-cell-group>
        <van-field
            v-model="form.name"
            name="姓名"
            label="姓名"
            placeholder="请录入姓名"
            required
            input-align="right"
            error-message-align="right"
            :rules="[{ required: true, message: '请录入姓名' }]"
        />
        <van-field
            v-model="form.cardType"
            is-link
            readonly
            name="证件类型"
            label="证件类型"
            required
            input-align="right"
            error-message-align="right"
            placeholder="请选择证件类型"
            @click="showPicker1 = true"
        />
        <van-field
            v-model="form.cardNo"
            name="证件号码"
            label="证件号码"
            placeholder="请录入证件号码"
            required
            input-align="right"
            error-message-align="right"
            :rules="[{ required: true, message: '请录入证件号码' }]"
        />
        <van-field
            v-model="form.mobile"
            name="手机号"
            label="手机号"
            placeholder="请录入手机号"
            required
            input-align="right"
            error-message-align="right"
            :rules="[{ required: true, message: '请录入手机号' }]"
        />
        <van-field
            v-model="form.email"
            name="电子邮箱"
            label="电子邮箱"
            placeholder="请录入电子邮箱"
            input-align="right"
            error-message-align="right"
        />
      </van-cell-group>
    </van-form>
    <div class="column-title">
      <strong>被保人信息</strong>
    </div>
    <van-form>
      <van-cell-group>
        <van-cell title="为谁投保(被保人)" >
          <template #label>
            <van-button @click="check = 1" :type="check == 1 ? 'primary':'default'" size="mini">本人</van-button>
            <van-button @click="check = 2" :type="check == 2 ? 'primary':'default'" size="mini">配偶</van-button>
            <van-button @click="check = 3" :type="check == 3 ? 'primary':'default'" size="mini">父母</van-button>
            <van-button @click="check = 4" :type="check == 4 ? 'primary':'default'" size="mini">子女</van-button>
          </template>
        </van-cell>
        <van-field
            v-if="check != 1"
            v-model="form.name2"
            name="姓名"
            label="姓名"
            placeholder="请录入姓名"
            required
            input-align="right"
            error-message-align="right"
            :rules="[{ required: true, message: '请录入姓名' }]"
        />
        <van-field
            v-if="check != 1"
            v-model="form.cardType2"
            is-link
            readonly
            name="证件类型"
            label="证件类型"
            required
            input-align="right"
            error-message-align="right"
            placeholder="请选择证件类型"
            @click="showPicker1 = true"
        />
        <van-field
            v-if="check != 1"
            v-model="form.cardNo2"
            name="证件号码"
            label="证件号码"
            placeholder="请录入证件号码"
            required
            input-align="right"
            error-message-align="right"
            :rules="[{ required: true, message: '请录入证件号码' }]"
        />
        <van-field
            v-if="check != 1"
            v-model="form.mobile2"
            name="手机号"
            label="手机号"
            placeholder="请录入手机号"
            required
            input-align="right"
            error-message-align="right"
            :rules="[{ required: true, message: '请录入手机号' }]"
        />
        <van-field
            name="保险期限"
            label="保险期限"
            disabled
        />
        <van-field
            v-model="form.startTime"
            name="开始日期"
            label="开始日期"
            is-link
            readonly
            @click="showPicker4 = true"
        >
          <template #extra>
            <span>0时起</span>
          </template>
        </van-field>
        <van-field
            v-model="form.endTime"
            name="结束日期"
            label="结束日期"
            disabled
        >
          <template #extra>
            <span>24时止</span>
          </template>
        </van-field>
        <van-cell title="社会医疗保险（含新农合）" >
          <template #value>
            <van-button @click="check2 = 1" plain :type="check2 == 1 ? 'primary':'default'" size="mini">有社保</van-button>
            <van-button @click="check2 = 2" plain :type="check2 == 2 ? 'primary':'default'" size="mini">无社保</van-button>
          </template>
        </van-cell>
      </van-cell-group>
    </van-form>
    <div class="column-title">
      <strong>销售人员信息</strong>
    </div>
    <van-cell-group>
      <van-cell title="机构名称" value="中国太平洋财产保险股份有限公司" value-class="flex-2"/>
      <van-cell title="执业证编号" value="01000433010080002018005993" value-class="flex-2"/>
      <van-cell title="经办人姓名" value="陈佳" value-class="flex-2"/>
    </van-cell-group>
    <van-field name="checkbox" class="clause">
      <template #input>
        <van-checkbox v-model="agree" shape="square">
          我已阅读
          <a href="#">投保须知</a>、
          <a href="#">保险条款</a>、
          <a href="#">理赔指引</a>、
          <a href="#">免责告知</a>、并通知所述内容
        </van-checkbox>
      </template>
    </van-field>
    <footer>
      <div>
        <div class="back-btn">返回</div>
        <div class="price">¥304.00</div>
      </div>
      <div>
        <div class="buy-btn">立即购买</div>
      </div>
    </footer>
    <!--证件类型-->
    <van-popup v-model:show="showPicker1" position="bottom">
      <van-picker
          :columns="columns1"
          @cancel="showPicker1 = false"
          v-model="form.cardType"
          @confirm="confirm1"
      />
    </van-popup>
    <!--证件类型-->
    <van-popup v-model:show="showPicker2" position="bottom">
      <van-picker
          :columns="columns2"
          @cancel="showPicker2 = false"
          v-model="form.cardType2"
          @confirm="confirm2"
      />
    </van-popup>
    <!--日期选择-->
    <van-popup v-model:show="showPicker4" position="bottom">
      <van-datetime-picker
          type="date"
          :min-date="minDate"
          :max-date="maxDate"
          @cancel="showPicker4 = false"
          @confirm="confirm4"
          :columns-order="['year', 'month', 'day']"
          :formatter="formatter"
      />
    </van-popup>
  </div>
</template>

<script>
import {useRoute} from "vue-router";
export default {
  name: "index",
  data() {
    return {
      type: '1',
      check: 1,
      check2: 1,
      agree: false,
      checked: false,
      columns1: ['身份证'],
      showPicker1: false,
      columns2: ['身份证'],
      showPicker2: false,
      showPicker4: false,
      minDate: new Date(new Date().getFullYear()+0,new Date().getMonth()+1,new Date().getDate()+0),
      maxDate: new Date(new Date().getFullYear()+0,11,31),
      form: {
        name: '',
        cardType: '身份证',
        cardNo: '',
        mobile: '',
        email: '',
        licensePlateColor: '蓝',
        seatNum: '',
        carId: '',
        carNature: '私家车',
        FrameId: '',
        addr: '',
        carDealerId: '',
        startTime: '',
        endTime: '',
        name2: '',
        cardType2: '身份证',
        cardNo2: '',
        mobile2: '',
      }
    }
  },
  methods:{
    confirm1(value) {
      this.form.cardType = value
      this.showPicker1 = false
    },
    confirm2(value) {
      this.form.cardType2 = value
      this.showPicker2 = false
    },
    confirm4(value) {
      this.form.startTime = new Date(parseInt(new Date(value).getTime())).toLocaleString().substring(0,10);
      this.form.endTime = new Date(parseInt(new Date(value).getTime()+86400000*365)).toLocaleString().substring(0,10);
      this.showPicker4 = false
    },
  },
  mounted() {
    const route = useRoute()
    this.type = route.params.type
  }
}
</script>

<style lang="less" scoped>
.accident-vaccines{
  padding-bottom: 65px;
  header{
    background: url("../../../assets/img/accident/header.png") left center no-repeat;
    background-size: cover;
    padding: 15px;
    .insurance-name{
      font-size: 20px;
    }
    .insurance-price{
      font-size: 18px;
      color: #f5a100;
    }
  }
  .column-title{
    padding: 15px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    strong{
      font-weight: 600;
      border-left: 3px solid #005bac;
      padding-left: 10px;
    }
  }
  .clause{
    margin-top: 30px;
    a{
      color: #005bac;
    }
  }
  footer{
    width: 100vw;
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
    height: 65px;
    line-height: 65px;
    &>div{
      flex: 1;
      display: flex;
      align-items: center;
    }
    .back-btn{
      background-color: rgb(213, 235, 255);
      text-align: center;
      font-size: 20px;
      flex: 2 2 0;
      height: 65px;
    }
    .price{
      font-size: 20px;
      color: #f5a100;
      flex: 3 3 0;
      height: 65px;
      text-align: center;
      background-color: #ffffff;
    }
    .buy-btn{
      flex: 1;
      font-size: 20px;
      text-align: center;
      background-color: #f5f5f5;
      color: rgba(0, 0, 0, 0.25);
      height: 65px;
    }
  }
  /deep/.flex-2{
    flex: 2 !important;
  }
}
</style>
